<template>
  <Header></Header>
  <div class="message">
    <div class="msg-box"
         v-for="message in msgLists"
         :key="message.id"
         @click="showDetails(message.id)">
      <router-link :to="`/messageDetails/${message.id}`" style="text-decoration: none; color: inherit;">
        <h4>{{ message.title }}</h4><br>
        <span>{{ message.content }}</span><br>
        <el-icon><Timer /></el-icon>
        <span>{{ message.time }} UTC + 8</span>
        <el-icon style="margin-left: 700px"><View /></el-icon>
        <span>{{ message.count }}</span>
      </router-link>
    </div>
  </div>
  <Footer></Footer>
</template>

<script setup>
import Footer from "@/components/Footer.vue";
import Header from "@/components/Header.vue";
import router from "@/router";
import { Timer, View } from "@element-plus/icons-vue";

const msgLists = [
  {
    "id": 1001,
    "title": "Gate.io已上線(WWW)永續合約交易(USDT結算),速来...",
    "time": "2023/10/7 15:30:08",
    "count": 3346,
    "toPath":"assets/message/message01.html",
    "content": "Gate.io永續合約是全球最活躍的區塊鏈資產合約市場之一，日交易量高達8億美金，擁有超過1000ETH的保險..."
  },
  {
    "id": 1002,
    "title": "以太坊最新会议:Devnet-9当前网参与率接近90%,NB...",
    "time": "2023/10/7 22:38:08",
    "count": 1008,
    "toPath":"assets/message/message02.html",
    "content": "PANews 10月7日消息，Galaxy研究副总裁Christine Kim发文总结第119次以太坊核心开发者共识会议（ACD..."
  },
  {
    "id": 1003,
    "title": "Tip组织最新会议:发现Epoch 2申领相关问题,完犊子...",
    "time": "2023/10/7 15:30:08",
    "count": 1346,
    "toPath":"assets/message/message03.html",
    "content": "10月7日消息，Web3社交应用Tip Coin于5:00左右开启Epoch 2阶段申领，随后发文表示，发现申领相关问题..."
  },
  {
    "id": 1004,
    "title": "Caroline Ellison或将于下周二SBF审判中出庭作证,恐怖",
    "time": "2023/10/7 07:30:00",
    "count": 10086,
    "toPath":"assets/message/message04.html",
    "content": "PANews 10月7日消息，据CoinDesk报道，对冲基金Alameda Research前首席执行官Caroline Ellison很可..."
  },
  {
    "id": 1005,
    "title": "英国因青少年隐私问题对Snap AI聊天机器人展开调查",
    "time": "2023/10/7 05:10:18",
    "count": 14651,
    "toPath":"assets/message/message05.html",
    "content": "据站长之家 10 月 7 日报道，Snap 公司因其生成式人工智能聊天机器人可能对 Snapchat 用户，尤其是 13 至 ..."
  }
];

const showDetails = (id) => {
  router.push(`/messageDetails/${id}`);
};
</script>

<style scoped>
.message {
  min-height: calc(100vh - 100px);
  width: 99%;
  padding-top: 50px;
  padding-bottom: 50px;
  overflow: auto;
}

.msg-box {
  width: 100%;
  min-height: 10vh;
  border: 2px solid #409EFF;
  border-radius: 20px;
  background-color: #409EFF;
  color: #c72d2d;
  margin-bottom: 10px;
}

.msg-box h4 {
  color: black;
}

el-icon {
  height: 25px;
  width: 25px;
  cursor: pointer;
}

/* 调整 View 图标的样式 */
.msg-box .view-icon {
  margin-left: 20px;
}
</style>